<template>
  <div class="energySupplyPage">
    <div class="supplyLeft">
      <div class="header headerGreen">电力能源运行监测</div>
      <div class="operation clearfix">
        <div v-for="item of operationList" :key="item.id" class="operationItem">
          <div class="top">{{ item.name }}</div>
          <div class="bottom">{{ item.value }}</div>
        </div>
      </div>
      <div class="header headerGreen">输变电统计</div>
      <div class="transmission">
        <div v-for="item of transmissionList" :key="item.id" class="item">
          <div class="left">
            <span>{{ item.value }}%</span>
          </div>
          <div class="right">
            <p class="name">{{ item.name }}</p>
            <p class="value">
              <span>{{ item.value }}</span
              >单位
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="supplyMiddle"></div>
    <div class="supplyRight">
      <div class="header headerGreen">发电量统计</div>
      <div class="power">
        <div
          v-for="item of powerList"
          :key="item.id"
          class="powerItem"
          :class="'powerItem' + item.id"
        >
          <div class="name">{{ item.name }}</div>
          <div class="value">{{ item.value }}<span>kw.h </span></div>
        </div>
      </div>
      <div class="header headerGreen">输变电统计</div>
      <div class="eneygyPie">
        <dv-charts :option="eneygyOption" style="width: 100%; height: 100%" />
      </div>
      <div class="header headerGreen">预警情况统计</div>
      <div class="warning">
        <dv-active-ring-chart
          :config="warningConfig"
          style="width: 100%; height: 100%"
        />
      </div>
      <div class="warningLegend">
        <div
          v-for="(item, index) of warningConfig.data"
          :key="index"
          class="legendItem"
        >
          <span :style="{background: item.color}"></span>
          {{ item.name }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      operationList: [
        { id: 1, name: "全年发电量(亿KW·h)", value: "3,430,499" },
        { id: 2, name: "可再生能源发电量", value: "2118.23" },
        { id: 3, name: "输送电能总量", value: "2418.23" },
        { id: 4, name: "平均可利用率", value: "88%" },
      ],
      transmissionList: [
        { id: 1, name: "年生产能力", value: "65" },
        { id: 2, name: "计划产量", value: "65" },
      ],
      powerList: [
        { id: 1, name: "火力发电量", value: "123121 " },
        { id: 2, name: "水力发电量", value: "123121 " },
        { id: 3, name: "风力发电量", value: "123121 " },
        { id: 4, name: "太阳能发电量", value: "123121 " },
      ],
      eneygyOption: {
        legend: {
          data: [
            {
              name: "输入电量",
              color: "#f78605",
            },
            {
              name: "输出电量",
              color: "#f9c78b",
            },
          ],
          textStyle: {
            fontSize: 10,
            fill: "#fff",
          },
        },
        grid: {
          left: "10%",
          right: "10%",
          top: "10%",
          bottom: "20%",
        },
        xAxis: {
          data: ["5月", "6月", "7月", "8月", "9月", "10月", "11月"],
          axisLabel: {
            style: {
              fill: "#fff",
              fontSize: 10,
            },
          },
        },
        yAxis: {
          data: "value",
          axisLabel: {
            style: {
              fill: "#fff",
              fontSize: 10,
            },
          },
          splitLine: {
            style: {
              stroke: "#14344d",
            },
          },
        },
        series: [
          {
            name: "输入电量",
            data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
            type: "bar",
            gradient: {
              color: ["#ffbb3d", "#f78605"],
            },
          },
          {
            name: "输出电量",
            data: [1000, 1230, 1400, 1500, 2500, 3200, 2985],
            type: "bar",
            gradient: {
              color: ["#f9c78b", "#f9c78b"],
            },
          },
        ],
      },
      warningConfig: {
        data: [
          {
            name: "完成数",
            value: 55,
            color: '#06c2b4'
          },
          {
            name: "已分派",
            value: 120,
            color: '#dd40ac'
          },
          {
            name: "观察中",
            value: 78,
            color: '#2c8ddf'
          },
          {
            name: "待处理",
            value: 66,
            color: '#6a6ee1'
          },
        ],
        color: ['#06c2b4', '#dd40ac', '#2c8ddf', '#6a6ee1'],
        radius: "70%",
        activeRadius: "80%",
        digitalFlopStyle: {
          fontSize: 20,
          fill: '#fff'
        }
      },
    };
  },
  methods: {},
  created() {},
  mounted() {},
};
</script>

<style lang="scss" scoped>
@import "../../style//energySupply.scss";
</style>
